<!-- ----------详情--------------- -->
<template>
	<view class="productDetail">
		<view class="productDetail_t">
			<image src="/static/image/product/product_bcg.png" />
			<view>
				<view class="title">{{ pageData.name }}</view>
				<view class="price">
					<text class="price_num">{{ pageData.price }} USDT</text>
				</view>
			</view>
		</view>
		<view class="detailList">
			<navigator
				:url="`/pages/product/productIntroduce?content=${pageData.content}`"
				class="item"
			>
				<view class="item_l xq">查看产品详情</view>
				<view class="item_r">
					<image src="/static/image/product/more.png" />
				</view>
			</navigator>
		</view>
		<view class="productDetail_b">
			<view
				:style="{
					display: `flex`,
					justifyContent: `center`,
					alignItems: `center`,
					fontSize: `22rpx`,
				}"
			>
				<label
					:style="{
						display: `flex`,
						alignItems: `center`,
					}"
				>
					<switch
						@change="changeSwitch"
						type="checkbox"
						:checked="isAgree"
						color="#fff"
					/>
					<text :style="{ color: `#999` }">我已阅读并同意</text>
				</label>
				<navigator
					:style="{ color: `#1b1b1b` }"
					hover-class="tap-hover"
					:url="`/pages/webview?url=${decodeURIComponent(
						'http://qkl.xuanhuabang.site/Public/buy.html'
					)}`"
				>
					《购买协议》
				</navigator>
			</view>

			<view
				:style="{
					marginTop: `30rpx`,
					display: `flex`,
					justifyContent: `space-between`,
					alignItems: `center`,
				}"
			>
				<view class="totalMoney">
					<text>总价：</text>
					<text class="money">{{ pageData.price }} USDT</text>
				</view>
				<view class="buyBtn" @click="buy">立即买入</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageData: {},
				isAgree: false,
			};
		},
		onLoad(options) {
			this.pageData = options;
		},
		methods: {
			buy() {
				if (!this.isAgree) {
					uni.showToast({
						title: "你需要阅读并同意购买协议后才能进行购买",
						icon: "none",
					});
					return;
				}
				this.$request
					.get("/Shop/Index/confirmProject", {
						id: this.pageData.id,
					})
					.then(({ msg: title }) => {
						uni.showToast({
							title,
							success: () =>
								setTimeout(() => {
									uni.redirectTo({
										url: "/pages/mine/sldd",
									});
								}, 1500),
						});
					});
			},
			changeSwitch({ detail }) {
				this.isAgree = detail.value;
			},
		},
	};
</script>

<style lang="scss">
	::v-deep {
		switch {
			transform: scale(0.6);
			.wx-checkbox-input,
			.uni-checkbox-input {
				border-color: #0d81f6;
				background-color: transparent;
			}

			.wx-checkbox-input.wx-checkbox-input-checked,
			.uni-checkbox-input.uni-checkbox-input-checked {
				background-color: #0d81f6;
			}

			&:not([disabled]) {
				.wx-checkbox-input:hover,
				.uni-checkbox-input:hover {
					border-color: #0d81f6;
				}
			}
		}
	}
	.productDetail {
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		.productDetail_t {
			width: 100%;
			height: 183rpx;
			position: relative;
			margin-bottom: 30rpx;
			image {
				width: 100%;
				height: 100%;
			}
			> view {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				padding: 45rpx 0 0 29rpx;
				box-sizing: border-box;
				.title {
					font-size: 32rpx;
					color: #ffffff;
					line-height: 31rpx;
					margin-bottom: 40rpx;
				}
				.price {
					font-size: 24rpx;
					color: #ffffff;
					line-height: 23rpx;

					.price_num {
						font-size: 32rpx;
						font-weight: 600;
						margin-right: 10rpx;
					}
				}
			}
		}
		.detailList {
			background-color: #ffffff;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			.item {
				font-size: 30rpx;
				color: #333333;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #e5e5e5;
				display: flex;
				justify-content: space-between;
				.item_r {
					color: #ff8737;
				}
				.xq {
					color: #2a62ff;
				}
				image {
					width: 13rpx;
					height: 23rpx;
				}
			}
		}
		.buyCount {
			font-size: 30rpx;
			color: #333333;
			padding: 26rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
			border-radius: 10rpx;
		}
		.productDetail_b {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 25rpx 30rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			background-color: #ffffff;
			position: fixed;
			left: 0;
			bottom: 0;
			.totalMoney {
				color: #1a1a1a;
				font-weight: 600;
				.money {
					color: #ff3608;
				}
			}
			.buyBtn {
				width: 240rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background-color: #2a62ff;
				color: #ffffff;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}
</style>
